<template>
  <div>
    <a-spin :spinning="loading">
      <div class="operate-page-content-inspect">  
        <div class="flex space-between h-57 align-center border-bottom pl-46 pr-20">
          <div> <b>{{ $t('other.factoryType') }}</b> </div>
          <div>
            <a-switch v-model:checked="status"></a-switch>
          </div>
        </div>  
        <div class="operate-box">
          <div>
            <a-tabs v-model:activeKey="activeKey" tab-position="left"  >
              <a-tab-pane v-for="(item, index) in tabList" :key="item.value" >
                <template #tab>
                  <a :href="`#${index+1}`">
                    {{item.label}}
                  </a>
                </template>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div>
            <section>
              <div>
                <a name="1"></a>
                <StaffCoefficient ref="staffRef" />
              </div> 
              <div >
                <a name="2"></a>
                <UncountedDate :info="uncountList" ref="uncounteRef"/>
              </div> 
              <div>
                <a name="3"></a>
                <MonthlyCoefficient  ref="monthRef"/>
              </div> 
              <div>
                <a name="4"></a>
                <KanbanData :info="kanbanInfo" ref="kanbanRef"/>
              </div> 
            </section>
          </div>
        </div>
      </div>
      <div class="operate-page-btns">
        <a-space>
          <a-button class="cancel" @click="onCancel">{{ $t('common.cancel') }}</a-button>
          <a-button type="primary" class="confirm" @click="onOk">{{ $t('common.ok') }}</a-button>
        </a-space>
      </div>
    </a-spin>

  </div>
</template>
<script  >
import { tabList } from  './modules/config'
import StaffCoefficient from './modules/staffCoefficient'
import UncountedDate from './modules/uncountedDate'
import MonthlyCoefficient from './modules/monthlyCoefficient'
import KanbanData from './modules/kanbanData'
import axios  from '@/utils/request'
import { mapState } from 'vuex'
import { cloneDeep } from 'lodash'
import { store } from '@/store'
export default {
  name: 'factoryInspectMode',
  components: {
    StaffCoefficient,
    UncountedDate,
    MonthlyCoefficient,
    KanbanData
  },
  computed: {
    ...mapState({ 
      tabs: (state) => state.setting.tabs,
    }),
  },
  data() {
    return {
      loading: false,
      tabList,
      activeKey: 1,
      url: {
        getInfo: '/api/system/verifyFactory/getVerifyFactory',
        saveInfo: '/api/system/verifyFactory/saveVerifyFactory'
      },
      obtainedInfo: {}, 
      kanbanInfo: {},
      uncountList: [],
      status: false
    }
  },
  methods: {
    async getInfo() {
      try { 
       const res = await axios.postAction(this.url.getInfo, {})
       if(res?.success) this.obtainedInfo = res?.data || {}
       this.initData()
      } catch {
        this.obtainedInfo = {}
      }
    }, 
    initData() {
      let {defectPercent, reworkPercent , scrapPercent, dateList, status} = this.obtainedInfo
      this.status = !status
      this.uncountList = dateList || []
      this.kanbanInfo = {defectPercent, reworkPercent , scrapPercent}
    },
    async onOk () {
      try {
        await this.$refs.staffRef.makeForm.validateFields()
        await this.$refs.monthRef.makeForm.validateFields()
        await this.$refs.kanbanRef.formRef.validateFields()
        this.loading = true
        const res = await axios.postAction('/api/system/verifyFactory/saveVerifyFactory', this.getParams())
        if (res.success) {
          this.$message.success(res.msg || this.$t('common.doSuccess'))
          this.refresh()
        }
        this.loading = false
      } catch {
        this.loading = false 
      }
    },
    getParams() {
      let {defectPercent, reworkPercent , scrapPercent} = this.$refs.kanbanRef.formState;
      let monthInfo = this.$refs.monthRef.dataSource 
      let staffInfo = this.$refs.staffRef.dataSource
      let uncounteInfo = this.$refs.uncounteRef.selectDateList 
      return {
        verifyFactoryVO: {
          dateList: uncounteInfo,
          defectPercent,
          id: this.obtainedInfo.id,
          reworkPercent,
          scrapPercent,
          status: this.status ? 0 : 1
        },
        monthPercentVOList: monthInfo,
        staffPercentVOList: staffInfo
      }
    },
    refresh() { 
      this.getInfo()
      this.$refs.monthRef.loadData()
      this.$refs.staffRef.loadData()
    },
    async onCancel() {  
      const tabList = cloneDeep(this.tabs)
      let changeTabs = tabList.filter((i) => { return !['/sysManage/paramConfig', '/sysManage/factoryInspectMode'].includes(i.path) })
      await store.commit('updateState', { tabs: changeTabs }) 
      this.$router.replace({ path: '/sysManage/paramConfig' })
    }
  },  
  created() {
    this.getInfo()
  }
}
</script>
